<template>
  <div>
    <h1>订单列表 (*☻-☻*)</h1><hr>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="ID"
          width="100">
      </el-table-column>
      <el-table-column
          prop="outTradeNo"
          label="订单号"
          width="220">
      </el-table-column>
      <el-table-column
          prop="name"
          label="商品名称"
          width="130">
      </el-table-column>
      <el-table-column
          prop="price"
          label="金额"
          width="150">
      </el-table-column>
      <el-table-column
          prop="sysName"
          label="状态"
          width="180">
        <template v-slot="scope">
          <el-button disabled type="primary" plain>{{scope.row.sysName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="220">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              v-if="scope.row.state==2 && roleId==5"
              type="danger"
              @click="refund(scope.row.outTradeNo)">退款</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--   分页 -->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="payPlan.pageNum"
          :page-sizes="pageSizes"
          :page-size="payPlan.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderView",
  data(){
    return{
      tableData:[],
      payPlan:{
        pageNum:1,
        pageSize:5
      },
      total:0,
      pageSizes:[1, 3, 5, 10],
      roleId:localStorage.getItem("roleId")
    }
  },methods:{
    toPay(outTradeNo){
      this.axios.post("http://172.20.10.5:8003/api/pay-plan/toPay?outTradeNo="+outTradeNo).then(res=>{
        if(res.data=="error"){
          this.$message.error("调用支付失败！！")
        }
        let win = window.open("#","_blank");
        win.document.writeln(res.data);
      })
    },
    /*订单列表*/
    orderList(){
      if(this.roleId==5){
        let item = localStorage.getItem("userId");
        this.axios.post("http://172.20.10.5:8003/api/sys-crop/orderListByUserId?userId="+item,this.payPlan).then(res=>{
          this.tableData=res.data.list;
          this.total=res.data.total;
          this.payPlan.pageNum=res.data.pageNum;
          this.payPlan.pageSize=res.data.pageSize
        })
      }
      else{
        this.axios.post("http://172.20.10.5:8003/api/sys-crop/orderList",this.payPlan).then(res=>{
          this.tableData=res.data.list;
          this.total=res.data.total;
          this.payPlan.pageNum=res.data.pageNum;
          this.payPlan.pageSize=res.data.pageSize
        })
      }
    },/*退款*/
    refund(outTradeNo){
      this.axios.post("http://172.20.10.5:8003/api/pay-plan/refund?outTradeNo="+outTradeNo).then(res=>{
        if(res.data=="success"){
          this.$message.success("退款成功！！");
          this.orderList();
        }
        else{
          this.$message.error("退款失败！！")
        }
      })
    }, handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.payPlan.pageSize=val
      this.orderList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.payPlan.pageNum=val
      this.orderList();
    }
  },created() {
    this.orderList();
  }
}
</script>

<style scoped>

</style>